<template>
  <span>
    <el-popover
      popper-class="message-icon-popper"
      placement="bottom"
      :width="300"
      trigger="click"
    >
      <template #reference>
        <!-- <el-icon
          style="vertical-align: middle; font-style: normal"
          :size="18"
        >
          <el-badge
            :value="unReadCount"
            :hidden="unReadCount == 0"
            :max="99"
            type="danger"
          >
            <ChatLineRound />
          </el-badge>
        </el-icon> -->
        <span class="newstext">消息
          <!-- <el-badge
            :value="unReadCount"
            :hidden="unReadCount == 0"
            :max="99"
            type="danger"
          >
            <ChatLineRound />
          </el-badge> -->
          <span v-if="unReadCount != 0" class="newMessTip"></span>
        </span>
      </template>
      <div class="message-box">
        <el-scrollbar max-height="400px">
          <template v-if="messages.length != 0">
            <MessageInfo
              v-for="item in messages"
              :key="item.id"
              :title="item.msgTitle"
              :description="item.msgDescription"
              :time="item.time"
              :isRead="item.IsRead"
              @click="choose(item)"
            ></MessageInfo>
          </template>
          <template v-else>
            <el-empty description="暂无消息"></el-empty>
          </template>
        </el-scrollbar>

        <div class="btns">
          <el-row>
            <el-col :span="12">
              <div
                @click="setAllReadStatus"
                class="opt-btn"
                style="border-right: 1px solid #f0f0f0"
              >
                全部已读
              </div>
            </el-col>
            <el-col :span="12">
              <div
                @click="toMoreMessages"
                class="opt-btn"
              >查看更多</div>
            </el-col>
          </el-row>
        </div>
      </div>
    </el-popover>
  </span>
</template>

<script>
import { defineComponent } from "vue";
import { ChatLineRound } from "@element-plus/icons";
import MessageInfo from "./MessageListItem.vue";
export default defineComponent({
  components: {
    ChatLineRound,
    MessageInfo,
  },
  data() {
    return {
      messages: this.$store.state.unReadMessage.message,
      unReadCount: this.$store.state.unReadMessage.unReadCount,
    };
  },
  methods: {
    getUnreadCount() {
      this.$store.dispatch('unReadMessage/getUnReadMessageData')
    },
    /**
     * 全部已读
     */
    async setAllReadStatus() {
      let res = await this.$http.post("/api/noticesend/readAll");
      if (res.status) {
        this.$message.success("设置成功");
        this.$store.dispatch('unReadMessage/updateUnReadMessage', { messages: [], unReadCount: 0 })
      }
    },
    /**
     * 选中其中一条
     */
    async choose(msg) {
      await this.$http.post("/api/noticesend/readbatch", {
        idArray: [msg.id],
      });
      this.$store.dispatch('unReadMessage/readMessage', msg)
      // 跳转到详情页
      this.$router.push("/message/myMsg");
    },
    /**
     * 查看更多
     */
    toMoreMessages() {
      this.$router.push("/message/myMsg");
    },
  },
  watch: {
    '$store.state.unReadMessage.message'(newVal) {
      this.messages = newVal;
    },
    '$store.state.unReadMessage.unReadCount'(newVal) {
      this.unReadCount = newVal;
    }
  },
  created() {
    this.getUnreadCount();
  },
});
</script>

<style lang="scss" scoped>
.message-box {
  max-width: 336px;
}

.btns {
  color: rgba(0, 0, 0, 0.85);
  text-align: center;
  border-top: 1px solid #f0f0f0;

  .opt-btn {
    text-align: center;
    height: 47px;
    line-height: 47px;
    cursor: pointer;

    &:hover {
      color: #409eff;
    }
  }
}
.newstext{
  position: relative;
  .newMessTip{
    display: block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #f56c6c;
    position: absolute;
    top: -3px;
    right: -3px;
  }
}
</style>
<style lang="scss">
.el-popover.message-icon-popper.el-popper {
  padding: 0px 0px 0px 0px;
}
</style>
